<script lang="ts">
export default {
  name: 'DemoIndex',
}
</script>
<script lang="ts" setup>
import { useCounterStore } from '@/stores/counter'

const demoPages = [
  {
    path: '/pages/demo/DrawPage/DrawPageDemo',
    title: 'DrawPage - canvas 简易画图',
  },
  {
    path: '/pages/demo/RecorderDemo/RecorderDemo',
    title: 'Recorder - 录音',
  },
  {
    path: '/pages/demo/VoicePlay/VoicePlayDemo',
    title: 'VoicePlay - 音频播放',
  },
  {
    path: '/pages/demo/OnClickOutside/OnClickOutside',
    title: 'OnClickOutside - 点外面关闭',
  },
  {
    path: '/pages/demo/canvas/canvas',
    title: 'canvas - 画笔实现',
  },
  {
    path: '/pages/demo/Waterfall/WaterfallDemo',
    title: 'Waterfall - 瀑布流刷2排',
  },
  {
    path: '/packageECharts/pages/ECharts/ECharts',
    title: 'ECharts - 图表',
  },
]
const counter = useCounterStore()
function piniaClick() {
  counter.increment()
}
</script>
<template>
  <p>
    <nut-button type="primary" @click="piniaClick">pinia {{ counter.count }}</nut-button>
  </p>
  <h2>demos</h2>
  <div>
    <div class="row" v-for="item of demoPages" :key="item.path">
      <a :href="item.path">{{ item.title }}</a>
    </div>
  </div>
</template>

<style lang="scss">
.h5-h2 {
  font-size: 20px;
  padding: 5px;
}

.row {
  padding: 3px 10px;
}
</style>
